<script type="text/javascript" language="javascript" charset="utf-8">
$(".menu-wrap li").removeClass("active-link");
$(".menu-wrap #statistic").addClass("active");
$("#statistic #info").addClass("active-link");
$("#statistic #commodity a").addClass("active-link");
</script>
<div class="common-tit">
  <h2>商品数据</h2>
  <span>数据统计 > 商品数据</span>
</div>
<div class="xdata-box">
  <h3>近30日总计</h3>
  <ul>
    <li>
      <span><%= @total_price %></span>
      <em>累积营业额(元)</em>
    </li>
    <li>
      <span><%= @total_price_lesson %></span>
      <em>课程商品(元)</em>
    </li>
    <li>
      <span><%= @total_price_peripheral %></span>
      <em>周边商品(元)</em>
    </li>
  </ul>
  <div id="commLimit"></div>
</div>
<div class="pdata-box clearfix">
  <h3>
    <span>本月商品排行榜</span>
    <div class="pda-tit">
      <em class="pda-sel">销量排行</em>
      <em>金额排行</em>
    </div>
  </h3>
  <div id="commPro"></div>
</div>
<input type="hidden" id="total_price_array"            value="<%= @total_price_array_string %>"/>
<input type="hidden" id="total_price_lesson_array"     value="<%= @total_price_lesson_array_string %>"/>
<input type="hidden" id="total_price_peripheral_array" value="<%= @total_price_peripheral_array_string %>"/>
<input type="hidden" id="past_month_array"             value="<%= @past_month_array_string %>"/>


<input type="hidden" id="good_total_price_array_string"       value="<%= @good_total_price_array_string %>"/>
<input type="hidden" id="good_total_price_name_array_string"  value="<%= @good_total_price_name_array_string %>"/>
<input type="hidden" id="good_total_amount_array_string"      value="<%= @good_total_amount_array_string %>"/>
<input type="hidden" id="good_total_amount_name_array_string" value="<%= @good_total_amount_name_array_string %>"/>

<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common.js"></script>
<script>
// 商品统计
// 导师课消
var myChart = echarts.init(document.getElementById('commLimit'));

// 累计金额
var total_price_array = $("#total_price_array").val().split(",");
// 课程累计金额
var total_price_lesson_array = $("#total_price_lesson_array").val().split(",");

// 课程累计金额
var total_price_peripheral_array = $("#total_price_peripheral_array").val().split(",");
// 时间周期
var past_month_array = $("#past_month_array").val().split(",");

// console.log(total_price_array);
// console.log(total_price_lesson_array);
// console.log(total_price_peripheral_array);
// console.log(past_month_array);

option = {
  legend: {
    data: ['累积营业额(元)', '课程商品(元)', '周边商品(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: past_month_array,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: past_month_array[0]
  }, {
    type: 'inside'
  }],
    series: [{
      name: '累积营业额(元)',
      type: 'bar',
      data: total_price_array,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '课程商品(元)',
      type: 'bar',
      data: total_price_lesson_array,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '周边商品(元)',
      type: 'bar',
      data: total_price_peripheral_array,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);


// 商品排行榜
var myChart1 = echarts.init(document.getElementById('commPro'));
// 排行榜前十商品金额
var good_total_price_array = $("#good_total_price_array_string").val().split(",");
// 排行榜前十商品名称
var good_total_price_name_array = $("#good_total_price_name_array_string").val().split(",");
// 排行榜前十商品数量
var good_total_amount_array = $("#good_total_amount_array_string").val().split(",");
// 排行榜前十商品名称
var good_total_amount_name_array = $("#good_total_amount_name_array_string").val().split(",");

// console.log(good_total_price_array);
// console.log(good_total_price_name_array);
// console.log(good_total_amount_array);
// console.log(good_total_amount_name_array);

option1 = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '4%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
      data: good_total_amount_name_array
  },
  series: [
  {
    name: '销售数量(个)',
    type: 'bar',
    data: good_total_amount_array
  }
  ]
};

myChart1.setOption(option1);

//  切换  销量排行  金额排行
//假数据
var testObj = {
  "yj" : [{
    dataY: good_total_amount_name_array,
    dataX: good_total_amount_array
  }],
  "hf" : [{
    dataY: good_total_price_name_array,
    dataX: good_total_price_array
  }]
}
$(".pda-tit em").on("click", function() {
  if ($(this).index() == 0) {
    myChart1.setOption({
      yAxis: {
        data: testObj.yj[0].dataY
      },
      series: [{
        name: '销售数量(个)',
        type: 'bar',
        data: testObj.yj[0].dataX
      }]
    });
  } else {
    myChart1.setOption({
      yAxis: {
        data: testObj.hf[0].dataY
      },
      series: [{
        name: '销售金额(元)',
        type: 'bar',
        data: testObj.hf[0].dataX
      }]
    });
  }
  if (!$(this).hasClass("pda-sel")) {
    $(this).addClass("pda-sel").siblings().removeClass("pda-sel");
  };
})

</script>
